<template>
      <el-container class="home-container">
        <el-header>
          <div>
            <span>个人学习空间系统</span>
          </div>
          <el-menu
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item >桌面</el-menu-item>
            <el-menu-item >学习管理</el-menu-item>
            <el-menu-item >社区</el-menu-item>
            <el-menu-item ><a href="https://www.ele.me" target="_blank">xxxx</a></el-menu-item>
            <el-submenu >
              <template slot="title">用户</template>
              <el-menu-item >选项1</el-menu-item>
              <el-menu-item >选项2</el-menu-item>
              <el-menu-item >选项3</el-menu-item>
            </el-submenu>
          </el-menu>
          <el-button type = "info" @click="logout">退出</el-button>
        </el-header>
        <el-container>
          <el-aside width="200px">
            <el-menu
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
              <!-- 一级菜单 -->
              <el-submenu index="1">
                <!-- 菜单模板 -->
                <template slot="title">
                  <!-- 图标与文本 -->
                  <i class="el-icon-location"></i>
                  <span>导航一</span>
                </template>
                <!-- 二级菜单 -->
                  <el-menu-item index="1-1">
                    <template slot="title">
                      <!-- 图标与文本 -->
                      <i class="el-icon-location"></i>
                      <span>选项1</span>
                    </template>
                  </el-menu-item>
                  
                  <el-menu-item index="1-2">选项2</el-menu-item>
                
              </el-submenu>
              <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">导航二</span>
              </el-menu-item>
              
            </el-menu>
          </el-aside>
          <el-main>Main</el-main>
        </el-container>
      </el-container>

</template>

<script>
  export default{};
</script>

<style>
.home-container{
  height:100%;
}

.el-header{
  background-color: darkslategrey;
  display:flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 30px;

}
.el-aside{
  background-color: lightseagreen;
}
.el-main{
  background-color:oldlace
}

</style>